<template>
  <div class="box">
    <div class="box1">
      <!-- <div class="b-left">
        <img class="" v-lazy="publicUrl('/images/active.jpg')" alt="" />
        <img class="sample" v-lazy="publicUrl('/images/sample1.png')" alt="" />
      </div> -->
      <div class="b-right">
        <Shopwindow
          :data-source="Shop"
          :partWidth="23"
          @next="next"
          :key="pageNum"
          @pre="pre"
        />
      </div>
    </div>
    <div class="b-coupon">
      <div class="c-top">
        <p>领券中心</p>
        <router-link to="/coupon/index" class="c-more thumb">
          <p>更多购物券</p>
          <img v-lazy="publicUrl('/images/more-red.png')" alt="" />
        </router-link>
      </div>
      <div class="coupon">
        <div class="bg">
          <img v-lazy="publicUrl('/images/counpon-background.jpg')" alt="" />
        </div>
        <div class="box2">
          <div class="voucher" v-for="(item, index) in Coupon">
            <div class="v-img">
              <img v-lazy="item.bg" class="v-i-bg" alt="" />
              <img v-lazy="item.img" class="v-i-sample" alt="" />
            </div>
            <div class="v-details">
              <div class="d-top">
                <p class="p3">￥</p>
                <p class="p1">{{ item.price }}</p>
                <p class="p2 overOne" :title="item.condition">{{ item.condition }}</p>
              </div>
              <div class="d-foot overOne" :title="item.text">{{ item.text }}</div>
            </div>
            <div :class="['click','thumb',item.is_get ? `get`:`noget`]" @click.stop="() => get(item, index)">
              <p>{{ item.is_get ? `已领券` : `领卷` }}</p>
            </div>
          </div>
        </div>
        <div class="c-bg">
          <img v-lazy="publicUrl('/images/coupon-b.png')" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="">
import { ref } from "vue";
import { publicUrl, shuffle } from "@/utils/util";
import Shopwindow from "@/components/Shopwindow/index.vue";
import { toast } from "vue3-toastify";

interface Coupon {
  bg: string;
  img: string;
  price: number;
  condition: string;
  text: string;
  is_get: 1 | 0;
}
const Coupon = ref<Array<Coupon>>([
  {
    bg: publicUrl("/images/counpon-background.jpg"),
    img: publicUrl("/images/sample1.png"),
    price: 50,
    condition: "(满599可用)MIM定制西装专场MIM定制西装专场",
    text: "MIM定制西装专场MIM定制西装专场MIM定制西装专场MIM定制西装专场MIM定制西装专场",
    is_get: 0,
  },
  {
    bg: publicUrl("/images/counpon-background.jpg"),
    img: publicUrl("/images/sample2.png"),
    price: 30,
    condition: "(满199可用)",
    text: "MIM定制衬衫专场",
    is_get: 1,
  },
  {
    bg: publicUrl("/images/counpon-background.jpg"),
    img: publicUrl("/images/sample3.png"),
    price: 30,
    condition: "(满199可用)",
    text: "高级牛仔裤专场",
    is_get: 0,
  },
]);
interface Shop {
  img: string;
  title: string;
  price: string;
}
const get = (item: Coupon, index: number) => {
  if (item.is_get) return toast.error(`请勿重复领取优惠卷`);
  Coupon.value[index].is_get = 1;
  toast.success(`领取成功`);
};
const Shop = ref<Array<Shop>>([
  {
    img: publicUrl("/images/shop1.jpg"),
    title: "MTM定制三件套/牛仔裤衬衫polo衫（厂家联合活动)",
    price: "￥49.90",
  },
  {
    img: publicUrl("/images/shop2.jpg"),
    title: "MTM定制专属夏天透气polo衫",
    price: "￥29.90",
  },
  // {
  //   img: publicUrl("/images/shop3.jpg"),
  //   tag: "MTM高度定制化舒适面料成套西装（多种面料任您选择）",
  //   price: "￥1299.90",
  // },
  // {
  //   img: publicUrl("/images/shop3.jpg"),
  //   tag: "MTM高度定制化舒适面料成套西装（多种面料任您选择）",
  //   price: "￥1299.90",
  // },
]);

const pageNum = ref<number>(1);
const next = () => {
  Shop.value = shuffle<Shop>(Shop.value);
  pageNum.value++;
};

const pre = () => {
  Shop.value = shuffle<Shop>(Shop.value);
  pageNum.value--;
};
</script>

<style scoped lang="scss">
@media screen and (min-width: $pc-min-width) {
  @import "./index.scss";
}
</style>
